
<style type="text/css">
#cssgen *{ float:left; }
#cssgen { border:2px solid blue; background:#000; }
.csscell{ background:#ddb; }
.cssel{ }
.cssvar{ background:#eec; }
.csserr{ background:#cee; }
</style>

<?php
$sc='
.wrapper{ width:800px; margin:0 auto; }
.sc-player{ width:800px; height:250px; position:relative; margin-bottom:20px; }
.sc-player ol, .sc-player li{ margin:0; padding:0; list-style-position:inside; }

/* Artworks */

.sc-player .sc-artwork-list{ width:100%; height:50%; background-color:#transparent; list-style-type:none; position:relative; display:none; }

.sc-player .sc-artwork-list li{ list-style-type:none; display:none; }

.sc-player .sc-artwork-list li.active{ list-style-type:none; display:block; }

.sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div{ list-style-type:none; width:380px; height:380px; float:left; margin:5px 0; }

/* controls */

.sc-player .sc-controls{ position:absolute; width:22px; height:22px; top:30px; left:0; z-index:5000; }

.sc-player .sc-controls a{ display:block; width:22px; height:22px; }

.sc-player .sc-controls a.sc-pause{ display:none; }

.sc-player.playing .sc-controls a.sc-play{ display:none; }

.sc-player.playing .sc-controls a.sc-pause{ display:block; }

/* scrubber */

.sc-scrubber{ position:absolute; top:0px; height:80px; width:800px; }

.sc-scrubber .sc-time-span{ height:80px; position:relative; }

.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{ height:80px; position:absolute; top:0; }

.sc-scrubber .sc-time-indicators{ position:absolute; right:0; top:30px; }

/* tracks */

/* Track listings*/

.sc-player ol.sc-trackslist{ position:absolute; float:left; width:100%; height:50%; top:90px; }

.sc-player ol.sc-trackslist li{ float:left; width:390px; cursor:pointer; margin:5px 0; padding:5px 0; list-style:none; }

/* Track info*/

.sc-player .sc-info{ position:absolute; top:10px; left:-5000px; width:400px; padding:5px; height:200px; z-index:500; margin-left:-200px; }

.sc-player .sc-info.active{ left:50%; top:12%; }


.sc-player .sc-info-toggle{ position:absolute; top:10px; left:10px; display:none; }

.sc-player .sc-info-toggle.active{ left:-5000px; }

.sc-player .sc-info-close{ position:absolute; top:10px; right:20px; }

/* utilities */

.sc-player .hidden{ display:none; }

.sc-player-engine-container{ width:1px; height:1px; position:fixed; top:2px; left:2px; }
';



$sc=@preg_replace('!/\*.*?\*/!s', '',$sc); //remove comments
$cssclasses=@explode('}',$sc);
echo'<div id="cssgen">';
foreach($cssclasses as $class){
  $parts=@explode('{',$class);
  if(@count($parts)==2){
    $vars=explode(';',$parts[1]);
	echo'<div class="csscell" style="float:left; border:1px solid black">
<div class="cssel" onclick="cellfold(this);">',$parts[0],'</div>';
	foreach($vars as $v){
	  $tuple=explode(':',$v);
	  if(count($tuple)==2){
	    $at=trim($tuple[0]);
		switch($at){
		case'height': case'width':
		  echo'<div class="cssvar">',$at,'<p/><input type="text" name="width"></div><p/>'; break;
		default:echo'<div class="csserr" style="float:left;">',$at,'</div>';
		}
      }
	}
  echo': </div>';
	//	echo'<p/>';
  }
}
echo'</div>';
?>





<script type="text/javascript">//<![CDATA[
function cellfold(){
  alert();
}



var svgcode='<svg width="800" height="600">\
<defs>\
<filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="3"/></filter>\
</defs>\
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/>\
<rect x="400" y="300" width="50" height="250" style="fill:blue;stroke:#11B;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/>\
</svg>';
var svg=document.createElement('object');
svg.setAttribute('type','image/svg+xml');
svg.setAttribute('data','data:image/svg+xml,'+ svgcode);
//document.getElementById('body').appendChild(svg);

function nxgoto(el){
  var page=el.innerHTML;
  document.getElementById('nxview').innerHTML=eval(page+'()');
}

var news=function(){
  return'this is the news yak yak yak Aenean iaculis pulvinar nulla porttitor malesuada. Pellentesque quis velit nulla. Aenean nisi nulla, luctus id sodales ac, porta eget metus. Praesent eget turpis quis tortor consectetur commodo ac vitae eros. In venenatis, sapien et facilisis venenatis, justo nunc condimentum nunc, non tincidunt arcu mauris sed nunc. Nullam commodo eleifend cursus. Vestibulum consequat porttitor arcu, nec adipiscing ligula elementum eget. Aenean in purus augue. Sed eleifend, quam varius volutpat convallis, mauris eros blandit ligula, scelerisque sollicitudin nisi massa ac diam. Phasellus vel enim at purus pulvinar iaculis. Fusce vel nunc vitae arcu placerat vulputate a ac orci. Quisque luctus velit a mi volutpat viverra sit amet in risus. Nunc vitae magna a metus consectetur semper. Cras ac posuere tortor.<br />\
	a mi volutpat viverra sit amet in risus. Nunc vitae magna a metus consectetur semper. Cras ac posuere tortor.<br />\
yak yak yak Aenean iaculis pulvinar nulla porttitor malesuada. Pellentesque quis velit nulla. Aenean nisi nulla, luctus id sodales ac, porta eget metus. Praesent eget turpis quis tortor consectetur commodo ac vitae eros. In venenatis, sapien et facilisis venenatis, justo nunc condimentum nunc, non tincidunt arcu mauris sed nunc. Nullam commodo eleifend cursus. Vestibulum consequat porttitor arcu, nec adipiscing ligula elementum eget. Aenean in purus augue. Sed eleifend, quam varius volutpat convallis, mauris eros blandit ligula, scelerisque sollicitudin nisi massa ac diam. Phasellus vel enim at purus pulvinar iaculis. Fusce vel nunc vitae arcu placerat vulputate a ac orci. Quisque luctus velit a mi volutpat viverra sit amet in risus. Nunc vitae magna a metus consectetur semper. Cras ac posuere tortor.<br />\
';
}

var biography=function(){
  return'Bio';
}

var discography=function(){
  return'\
  ';
}

var media=function(){
  return'Bio';
}

var guestbook=function(){
//  return'<iframe src="openbook-1.2.2" style="width:100%; height:100%;"/><div style="position:relative; bottom:0px; right:0px; background:blue; width:20px; height:20px; "></div>';
}

var bookings=function(){
  return'book me';
}
//]]></script>